<template>
	<view class="main">
		<view class="money">
			<view class="amount">
				<image class="icon" src="../../static/money.png" mode="widthFix"></image>
				<text class="title">总收益</text>
				<text class="number">{{amountData.all_in_money}}</text>
			</view>
			<view class="amount">
				<image class="icon" src="../../static/money.png" mode="widthFix"></image>
				<text class="title">账号余额</text>
				<text class="number">{{amountData.money}}</text>
			</view>
		</view>
		<view class="bill">
			<view class="item" @click="monthBill">
				<image class="icon" src="../../static/bill.png" mode="widthFix"></image>
				月度账单
			</view>
			<view class="item" @click="incomeDetail">
				<image class="icon" src="../../static/detail_money.png" mode="widthFix"></image>
				收益明细
			</view>
		</view>
		<view class="btn" @click="explain">
			<image class="icon" src="../../static/explain.png" mode="widthFix"></image> 提现说明 <image class="get"
				src="../../static/get.png" mode="widthFix"></image>
		</view>
		<view class="btn" @click="withdrawalRecord">
			<image class="icon" src="../../static/record.png" mode="widthFix"></image> 提现记录 <image class="get"
				src="../../static/get.png" mode="widthFix"></image>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" :closeable="true" width="80%">

			<view class="popup">
				<view class="title">
					提现说明
				</view>
				<view class="content">
					提现金额是由您邀请好友购买领驾猫交规会员的商品后获得推广奖励，我们将按照您收益的金额达到可提现的金额，申请提现到您的银行卡中
					1.总收益
					是指您通过分享后获得的总收益
					2.申请提现
					是您邀请好友购买领驾猫交规会员使用后获得的可用于提现的金额。
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		myAmount
	} from "@/api/index.js"
	export default {
		data() {
			return {
				show: false,
				amountData: {
					all_in_money: ''
				}
			};
		},
		mounted() {
			//收益 
			myAmount().then(res => {
				this.amountData = res.data
			})
		},
		methods: {
			//说明
			explain() {
				this.show = true
			},
			// 月度账单
			monthBill() {
				uni.navigateTo({
					url: "/pages/wallet/monthBill"
				})
			},
			//提现记录
			withdrawalRecord() {
				uni.navigateTo({
					url: "/pages/wallet/withdrawalRecord"
				})
			},
			// 收益明细
			incomeDetail() {
				uni.navigateTo({
					url: "/pages/wallet/incomeDetail"
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #F0F0F0;
	}

	.money {
		background-color: #3B81F3;
		display: flex;
		align-items: center;
		height: 300rpx;
		width: 100%;

		.amount {
			margin: 0 20rpx;
			color: #fff;
			text-align: center;
			flex: 1;

			.icon {
				width: 60rpx;
			}

			.title {
				display: block;
				font-size: 28rpx;
				font-weight: 400;
				margin: 20rpx 0;
			}

			.number {
				font-size: 38rpx;
				font-weight: 600;
			}
		}
	}

	.bill {
		background-color: #fff;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 10rpx;
		width: calc(100% - 52rpx);
		margin: 40rpx auto;
		box-shadow: 4px 6px 6px 0px #E0E0E0;

		.item {
			flex: 1;
			color: #656565;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 40rpx;
				margin-right: 10rpx;
			}
		}

		.item:first-child {
			border-right: 1px solid #989898;
		}
	}

	.btn {
		padding: 26rpx;
		color: #656565;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		width: calc(100% - 52rpx);
		margin-left: 26rpx;
		display: flex;
		align-items: center;

		.icon {
			width: 40rpx;
			margin-right: 10rpx;
		}

		.get {
			width: 40rpx;
			margin-left: auto;
		}
	}

	.popup {
		padding: 30rpx 40rpx;
		font-size: 28rpx;
		line-height: 40rpx;

		.title {
			font-size: 32rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}
	}
</style>